<template>
	<view class="bookImg">
		<view class="wrapper">
				<view class="pic_content">
					<view class="footer_content">
								 <view class="pic_header">
										<view class="btns"></view>
										<view class="pic_num">
											身份证明
										</view>
								 </view>
								 <view class="pic_img">
								 	<image :src="idcard_img" mode="" @error="idcardError" @click.stop="preCardImg(idcard_img)"></image>
								 </view>
							</view>
							
							<view class="footer_content">
								 <view class="pic_header">
										<view class="btns"></view>
										<view class="pic_num">
											等级证书
										</view>
								 </view>
								 <view class="pic_img">
								 	<image :src="bookno_img" mode="" @error="booknoError" @click.stop="preLevelImg(bookno_img)"></image>
								 </view>
							</view>
				</view>
				</view>
			</view>
</template>

<script>
	import {memDetail} from "@/common/api.js"
	export default{
		data(){
			return{
				id:"",
				bookno_img:"",
				idcard_img:"",
				memberDetail:{},
				isPreCardImg:false,
				isPreLevelImg:false,
				imgPreList:[]
			}
		},
		onLoad(e) {
			var _this=this;
			_this.id=e.id
			_this.getBookNoImg()
		},
		methods:{
			getBookNoImg(){
				var _this=this,data={
					id:_this.id
				};
				memDetail(data).then(function(res){
					var e=res.data;
					if(e.errcode==0){
							_this.memberDetail=e.data.p_info
							_this.idcard_img=e.data.p_info.certificate!=null&&e.data.p_info.certificate!=""?"https:"+_this.$store.state.baseImgURL+e.data.p_info.certificate:"https:"+_this.$store.state.baseImgURL+"img/cert/no_certificate.jpg";
							_this.bookno_img=e.data.p_info.level_img!=null?"https:"+_this.$store.state.baseImgURL+e.data.p_info.level_img:"https:"+_this.$store.state.baseImgURL+"img/cert/no_level.jpg";
							_this.isPreCardImg=e.data.p_info.certificate!=null&&e.data.p_info.certificate!=""?true:false;
							_this.isPreLevelImg=e.data.p_info.level_img!=null&&e.data.p_info.level_img!=""?true:false;
							if(_this.isPreCardImg){
								_this.imgPreList.push(_this.idcard_img)
							}
							if(_this.isPreLevelImg){
								_this.imgPreList.push(_this.bookno_img)
							}
						}else if(e.errcode==1000||e.errcode==1001){
							uni.removeStorageSync('token');
							uni.reLaunch({
								url:'/pages/home/welcome'
							})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
				})
			},
			preCardImg(imgSrc){
				var _this=this;
				if(imgSrc!=null&&imgSrc!=""&&_this.isPreCardImg){
					uni.previewImage({
						current:imgSrc,
						urls:_this.imgPreList
					})
				}
			},
			preLevelImg(imgSrc){
				var _this=this;
				if(imgSrc!=null&&imgSrc!=""&&_this.isPreLevelImg){
					uni.previewImage({
						current:imgSrc,
						urls:_this.imgPreList
					})
				}
			},
			booknoError(){
				this.bookno_img=this.$store.state.baseImgURL+"img/cert/no_level.jpg"
			},
			idcardError(){
				this.idcard_img=this.$store.state.baseImgURL+"img/cert/no_certificate.jpg"
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrapper{
		// width: 100%;
		margin:0 20rpx;
		display: flex;
		flex-direction: row;
		// justify-content: center;
		// background: #fff;
		// padding: 20rpx 0;
	}
	.pic_content{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.footer_cell{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 20rpx;
		background: #fff;
		.btns{
			width:24rpx;
			height:24rpx;
			background:rgba(255,255,255,1);
			border:6rpx solid rgba(26,102,255,1);
			border-radius:50%;
			opacity:1;
		}
		.pic_num{
			margin-left: 32rpx;
			margin-top: -8rpx;
		}
		.pic_header{
			display: flex;
			flex-direction: row;
			margin-top: 24rpx;
		}
	}
	.footer_content{
		padding-left: 20px;
		background: #fff;
		margin-top: 20rpx;
		.btns{
			width:24rpx;
			height:24rpx;
			background:rgba(255,255,255,1);
			border:6rpx solid rgba(26,102,255,1);
			border-radius:50%;
			opacity:1;
		}
		.pic_num{
			margin-left: 32rpx;
			margin-top: -8rpx;
		}
		.pic_header{
			display: flex;
			flex-direction: row;
			margin-top: 24rpx;
		}
		.pic_img{
			margin-top: 20rpx;
			margin-left: 50rpx;
			image{
				width: 400rpx;
				height: 328rpx;
			}
		}
	}
</style>
